<template>
  <div>
    <el-menu
        :default-active="defaultValue"
        class="el-menu-vertical-demo"
        :collapse="collapse"
         text-color="#394657"
         active-text-color="#4285f4"
      >
      <template v-for="item in userMenus" :key="item.id">
        <template v-if="item.children && item.children.length">
          <el-sub-menu :index="item.id + '' ">
            <template #title>
              <!-- <el-icon size="20"> <i-ep-setting /></el-icon> -->
                  <el-icon size="20">
                      <component :is="item.icon" />
                  </el-icon>
              <span>{{item.name}}</span>
            </template>
            <template v-for="subItem in item.children" :key="subItem.id">
              <el-menu-item :index="subItem.id + ''" @click="handleItemClick(subItem)">
                <span>{{subItem.name}}</span>
              </el-menu-item>
            </template>
          </el-sub-menu>
        </template>
        <template v-else>
           <el-menu-item :index="item.id + ''" @click="handleItemClick(item)">
              <span>{{item.name}}</span>
            </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script lang="ts">
import {  defineComponent,PropType, ref} from 'vue'
import { Setting, Monitor, Goods} from "@element-plus/icons-vue";
import { useStore } from '@/store'
import { useRouter, useRoute } from 'vue-router'
import { pathMapToMenu } from '@/utils/map-menus'

export default defineComponent({
  components: {
    Setting,
    Monitor,
    Goods,
  },
  props: {
    collapse: {
      type: Boolean as PropType<boolean>,
      default: false
    }
  },
  setup () {
    const store = useStore()
    const router = useRouter()
    const route = useRoute()
    const userMenus = store.state.login.userMenus
    const currenPath = route.path

    const menu = pathMapToMenu(userMenus, currenPath)

    const defaultValue = ref(menu.id + '')


    userMenus.forEach((item: any) => {
      const icon = item.icon.split('-')
      item.icon = icon[icon.length-1]
    });

    const handleItemClick = (item: any) => {
      router.push({
        path: item.url ?? '/not-found'
      })
    }
    return {
      userMenus,
      handleItemClick,
      defaultValue
    }
  }
})
</script>

<style scoped lang="less">
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
    &::-webkit-scrollbar {
    display: none;
    width: 0;
  }
  }
.el-menu {
  transition: all 10ms;
  &::-webkit-scrollbar {
    display: none;
    width: 0;
  }
}


</style>
